@extends('back.common.layout')
@section('title', '商品分类列表')

@section('content')
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <a href="{{route('category.set')}}" data-toggle="tooltip" title="新增" class="btn btn-primary">
                        <i class="fa fa-plus"></i>
                    </a>

                    <button type="button" data-toggle="tooltip" title="删除" class="btn btn-danger"
                            onclick="confirm('确认删除选中的分类及其子类？') ? $('#form-category').submit() : false;">
                        <i class="fa fa-trash-o"></i>
                    </button>
                </div>
                <h1>商品分类</h1>
                <ul class="breadcrumb">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="{{route('category.list')}}">商品分类列表</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-list"></i>
                        商品分类列表
                    </h3>
                </div>
                <div class="panel-body">
                    <form action="{{route('category.list')}}" method="post" enctype="multipart/form-data"
                          id="form-category">
                        {{csrf_field()}}
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover ">
                                <thead>
                                <tr>
                                    <td style="width: 1px;" class="text-center">
                                        <input type="checkbox"
                                               onclick="$('input[name*=\'selected\']').prop('checked', this.checked);"/>
                                    </td>
                                    <td class="text-left">
                                        <a href="" class="">分类名称</a>
                                    </td>
                                    <td class="text-left">
                                        <a href="" class="">分类排序</a>
                                    </td>

                                    <td class="text-right">操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($categoryCollection as $list)
                                    @if( $list['level'] > 0)
                                        <tr style="display: none" data-level="{{$list['level']}}">
                                    @else
                                        <tr style="display: table-row" data-level="{{$list['level']}}">
                                    @endif
                                        <td class="text-center">
                                            <input type="checkbox" name="selected[]" value="{{$list['id']}}"/>
                                        </td>
                                        <td class="text-left">
                                            {{str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $list['level'])}}
                                            <a href="javascript:void(0);" class="row-icon"><i class="fa fa-plus"></i></a>
                                            {{$list['title']}}
                                        </td>
                                        <td class="text-left">
                                            {{$list['sort_number']}}
                                        </td>

                                        <td class="text-right">
                                            <a href="{{route('category.set',['id' => $list['id']])}}"
                                               data-toggle="tooltip" title="编辑" class="btn btn-primary">
                                                <i class="fa fa-pencil"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            @if ($errors->has('selected.*'))
                                <label class="text-danger">{{$errors->first('selected.*')}}</label>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('appendJS')
    <script>
        $(function () {
        	//点击展开或合上子分类
	        $('a.row-icon').click(function () {
	        	var currTr = $(this).parents('tr');
	        	//处理加减号变化
                if ($(this).find('i').hasClass('fa-plus')) {
                    var op = 'minus';
                    $(this).find('i').removeClass('fa-plus').addClass('fa-minus');
                } else if ($(this).find('i').hasClass('fa-minus')) {
	                var op = 'plus';
	                $(this).find('i').removeClass('fa-minus').addClass('fa-plus');
                }

		        //遍历后面的tr
		        currTr.nextAll().each(function (i) {
		        	//同辈的忽略
		        	if ($(this).data('level') <= currTr.data('level')) {
				        return false;
                    }

                    if (op == 'plus') {
	                    $(this).hide().find('a:eq(0)>i').removeClass('fa-minus').addClass('fa-plus');
                    } else if (op == 'minus') {
	                    //仅仅处理子类
	                    if ($(this).data('level') == parseInt(currTr.data('level')) + 1) {
		                    $(this).show();
	                    }
                    }
                });
            });
        });
    </script>
@endsection